<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        function formate(url, data) {
            let type = "get";
            if (arguments.length === 1) {
                type = "post";
                data = url;
                url = "";
            }
            let start = true;
            for (let key in data) {
                if (type === "get") {
                    url += (start ? "?" : "&") + key + "=" + key[data];
                } else if (type === "post") {
                    url += (start ? "" : "&") + key + "=" + data[key]
                }
                start = false;
            }
            return url;
        }
        function ajax(options) {
            options = Object.assign({
                method: "get",
                callback: function () { },
                url: "",
                data: {},
                jsonpcallback: "callback"
            }, options);

            if (options.method === "jsonp") {
                let script = document.createElement("script");
                script.src = formate(options.url, options.data);
                document.body.appendChild(script);
                window[options.jsonpcallback] = (data) => {
                    options.callback(data);
                }
                script.onload = function () {
                    script.remove()
                }
            } else {
                let xhr = new XMLHttpRequest();
                xhr.open(options.method, options.method.toLowerCase() === "get" ? formate(options.url, options.data) : options.url);
                if (options.method.toLowerCase() === "post") {
                    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                }
                xhr.send(options.method.toLowerCase() === "post" ? formate(options.data) : null);
                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
                        options.callback(xhr.responseText)
                    }
                }
            }
        }

    </script>

</body>

</html>